<template>
  <view>
    <u-navbar :is-back="true" title="收货地址" back-text="">
      <view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end" >
        <!-- <view>
                <image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </view> -->
      </view>
    </u-navbar>

    <view class="addressList">
      <view class="addressList-items" v-for="(item, index) in addressList" :key="index" >
        <view class="HR"></view>

		<view style="padding: 1rem;">
			<view class="content-top">
				<view style=" font-size: 0.79rem; font-family: PingFang SC; font-weight: 400; color: #3C3C3C;" >
					收货人:{{item.name}}</view>
				<view style="font-size: 0.75rem; font-family: PingFang SC; font-weight: 400; color: #3c3c3c;">{{item.phone}}</view>
			</view>
			<view>
				<view style="font-size: 0.75rem;font-family: PingFang SC;font-weight: 300;color: #3c3c3c;
				  padding: 0.5rem 0rem;border-bottom: 1px solid #f2f2f2;">
				  {{item.address}}</view>
			</view>
			<view class="content-bottom">
				<view style="display: flex;align-items: center;" @click="defauteAddress(item)">
					<image v-if="item.defaultAddress!=0" style="width: 0.8rem;height: 0.8rem;margin-right: 0.2rem;" src="../../style/image/cargo/round.png" alt=""/>
					<image v-if="item.defaultAddress==0" style="width: 0.8rem;height: 0.8rem;margin-right: 0.2rem;" src="../../style/image/cargo/selectRound.png" alt=""/>
					<view style="font-size: 0.68rem;font-family: PingFang SC;font-weight: 400;color: #02AF74;" >默认地址</view>
				</view>

				<view class="content-bottom-right" >
					<view style="display: flex;align-items: center;margin-right: 1rem;" @click="editAddress(item)">
					  <image style="width: 0.8rem;height: 0.8rem;margin-right: 0.2rem;" src="../../style/image/order/edit.png" alt="" />
					  <view class="bottom-text" >编辑</view>
					</view>
					<view style="display: flex;align-items: center;" @click="deleteAddress(item)">
					  <image style="width: 0.8rem;height: 0.8rem;margin-right: 0.2rem;" src="../../style/image/order/delete.png" alt="" />
					  <view  class="bottom-text"  >删除</view>
					</view>
				</view>
			</view>
		</view>
        
      </view>
	     <view style="margin-top:2rem;" >
		  <u-empty    v-if="addressList.length==0" text="暂无数据" mode="data"></u-empty>
		 </view>
    </view>


	<view @click="addAddress"  class="footP" >
		<view  style="padding: 0.7rem;display: flex;align-items: center;" >
			<!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
			<view  style="color: white;margin-left: 0.2rem;display: flex;align-items: center;">
			<image style="width:1rem;height:1rem;margin-right: 0.2rem;" src="../../style/image/order/add.png" alt="">
			<view>添加新地址</view>
			</view>
		</view>
	</view>

  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import { findAddress } from "../../utils/uniApi";
import { setDefaultAddress } from "../../utils/uniApi";
import { saveAddress } from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;
  
  public addressList:any=[];

  created() {}
  
  onHide(){
  	  uni.hideLoading();
  }
  
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/order/address",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  
  onShow(){
	  this.findAddress()
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
  
  //拉取地址的数据
  findAddress(){
	  uni.showLoading({
	  	title: '加载中'
	  });
  	  let params = {
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  findAddress(params).then((res: any) => {
		  // console.log('++++++++++++++++++++地址数据列表123：' + JSON.stringify(res.data) )
  	      if(res.data.code==200){
  			  this.addressList = res.data.data
			  uni.hideLoading();
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
			  	title: '数据加载失败',
			  	icon: 'none',
			  	duration: 2000
			  });
  	      }
  	  });
  }
  //设置默认地址
  defauteAddress(item:any){
	  if(item.defaultAddress==0){
		  return
	  }
	  uni.showLoading({
	  	title: '加载中'
	  });
	  let params = {
		addressId:item.id,
	    userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
	  };
	  setDefaultAddress(params).then((res: any) => {
	      if(res.data.code==200){
			  this.addressList.map((val:any, idx:any) => {
			  	if(val.id == item.id){
			  		val.defaultAddress = 0;
			  	}else{
					val.defaultAddress = 1;
				}
			  })
			  uni.hideLoading();
			  uni.showToast({
			  	title: '设置默认地址成功',
			  	icon:'none',
			  	duration: 2000
			  });
	      }else{
			  uni.hideLoading();
			  uni.showToast({
			  	title: '设置默认地址失败',
			  	icon: 'none',
			  	duration: 2000
			  });
	      }
	  });
  }
  //删除地址
  deleteAddress(item:any){
	  uni.showLoading({
	  	title: '加载中'
	  });
  	  let params = {
		isremove:1,
  	  	id:item.id,
  	  };
  	  saveAddress(params).then((res: any) => {
  	      if(res.data.code==200){
			  for(var i=this.addressList.length-1;i>=0;i--){
				  var address = this.addressList[i]
				  if(address.id == item.id){
					  this.addressList.splice(i,1)
					  return
				  }
			  }
			  uni.hideLoading();
			  uni.showToast({
				title: '删除地址成功',
				icon:'none',
				duration: 2000
			  });
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
			  	title: '删除地址失败',
			  	icon: 'none',
			  	duration: 2000
			  });
  	      }
  	  });
  }
  //编辑地址
  editAddress(item:any){
  	  uni.navigateTo({
  	  url: './addAddress?addressDic='+ encodeURIComponent(JSON.stringify(item)),
  	  });
  }

  addAddress(){
      uni.navigateTo({
      url: './addAddress'
      });
  }


}
</script>

<style  lang="scss"  scoped>
.addressList-items {
  /* padding: 1rem; */
}

.content-top {
  display: flex;
  justify-content: space-between;
}
.content-bottom{
 display: flex;
 justify-content: space-between;
 margin-top: 0.5rem;
}

.content-bottom-right{
        display: flex;
    }

 .bottom-text{
    
font-size: 0.68rem;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
 }
 .HR{
  height: 0.5rem;
  background-color: #f3f5f7;
 }
 
.footP{

position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

</style>